<!DOCTYPE html>
<html>
<head>
	<title>phone seven page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width-device,initial-scale=1.0,maximum-scale=1.0">

	<style type="modernizr-1.7.min.js"></style>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{background: #FFFFA6;}

		#main section{
			display: block;
			margin: 5% auto;
			width: 60%;
			height: 120px;
			border:5px solid #29D9c2;
		}

		/*css 适配屏幕在 480px 时 使用下面的样式*/
		@media screen and (min-width: 480px){
			#main {width: 90%;margin: 0 auto;}

			#main section:first-child {
				margin-right: 5%;
			}
			#main section { float: left;width: 45% }

		}

	</style>
</head>
<body>
		<div id="container">
			<div id="main">
				<section id="top-news">top - news</section>
				<section id="sports">sports</section>
			</div>
		</div>
</body>
</html>